<template>
    <div id="app">
        <!-- 预览图片全局挂在 -->
        <el-image-viewer :z-index="99999" v-if="showImgViewer" :on-close="closeImgView" :initialIndex="currentImgViewIndex" :url-list="ImgUrlList" />

        <transition name="el-fade-in-linear">
            <Loading v-if="loading"></Loading>
            <router-view v-else />
        </transition>
    </div>
</template>

<script>
// 导入组件
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { mapState } from 'vuex'
import Loading from './components/Loading'

export default {
    name: 'App',
    components: { Loading, ElImageViewer },
    mounted() {
        const isLoading = window.sessionStorage.getItem('vue-loading')
        if (isLoading) {
            this.$store.commit('app/SET_STATE', { loading: false })
        } else {
            window.sessionStorage.setItem('vue-loading', true)
            setTimeout(() => {
                this.$store.commit('app/SET_STATE', { loading: false })
            }, 2100)
        }

        this.$store.dispatch('appConfig/globalConfig', { vm: this })

        // this.appConfig()
    },

    computed: {
        ...mapState('app', ['loading', 'showImgViewer', 'ImgUrlList', 'currentImgViewIndex']),
    },
    
    methods: {
        // 应用配置
        async appConfig() {
            this.getIconfont()
        },
        async getIconfont() {
            const { data } = await this.$api.base.getIconfont()
            this.$ls.set('iconList', data)
        },
        // 关闭图片预览
        closeImgView() {
            this.$store.commit('app/SET_STATE', { showImgViewer: false })
        },
    },
}
</script>
